<style>
    .panelX {
        border:1px solid RGB(51,122,183);
        box-shadow: 1px 3px 3px -1px gray;
        border-radius: 4px;
    }
    .panelX:hover {
        box-shadow: 4px 4px 3px -1px gray;
    }
    .panel-heading {
        color: white;
        background-color: RGB(51,122,183);
        /*border-bottom: 1px solid lightgray;*/
    }
</style>

<!--编辑组件-->
<div id="CustomerEdit" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml"  style=" height:100%;margin: 0px;padding: 0px;">
    <div id="bodyFrame"  class="panel panel-default" style="border-radius: 0px;">
        <div id="topBody"  class="panel-heading" style="padding: 10px">
            <h3 class="panel-title pull-left" > 修改实体 </h3>
            <button type="button" v-on:click="jumpToList()" class="btn btn-primary pull-right" style="margin-top: -7px">返回</button>
            <br/>
        </div>
        <div   id="centerBody" class="panel-body" >
            <!--表单部分-->
            <div class="col-md-12 column" style="margin-bottom: 10px">
                <div class="panelX" style="margin: 0px">
                    <div class="panel-heading">
                        <h3 class="panel-title"> 基础信息 </h3>
                    </div>
                    <div class="panel-body">
                        <!--编辑条件-->
                        <template v-for="(item, index) in initSaveColumnList" >
                            <div class="form-group col-md-6">
                                <label v-bind:for="'inputFile'+index" class="col-md-2 control-label" style="text-align: right;margin-top: 10px ">{{item.title}}:</label>
                                <div class="col-md-10" style="margin-top: 10px ">
                                    <!--普通-->
                                    <template v-if="item.type == 0" >
                                        <input type="text"  v-model="saveDao[item.fieldName]" class="form-control" v-bind:id="'inputFile'+index" :disabled="!item.canEdit"/>
                                    </template>
                                    <!--图片-->
                                    <img v-if="item.type == 1" :src="saveDao[item.fieldName] !=null ? $ImageUrl(saveDao[item.fieldName]) : '/img/fileIcon.jpg'"   class="img-thumbnail"  @click="selectImage(item.fieldName)" width="100" />
                                    <!--字典 翻译-->
                                    <template v-if="item.type == 2 && !item.canEdit" >
                                        <input type="input" :value="dict[item.dictCodeType].map[saveDao[item.fieldName]]" class="form-control" v-bind:id="'inputFile'+index" :disabled="!item.canEdit"/></span>
                                    </template>
                                    <template v-if="item.type == 2 && item.canEdit" >
                                        <!-- 渲染字典列表 -->
                                        <select   v-model="saveDao[item.fieldName]"  class="form-control" v-bind:id="'inputFile'+index"  >
                                            <template v-for="dictItem in dict[item.dictCodeType].list" >
                                                <option v-if="dictItem.codeCode == saveDao[item.fieldName]"  v-bind:value="dictItem.codeCode" selected>{{dictItem.codeValue }}</option>
                                                <option v-else v-bind:value="dictItem.codeCode">{{dictItem.codeValue }}</option>
                                            </template>
                                        </select>
                                    </template>
                                    <!--日期-->
                                    <template v-if="item.type == 3" >
                                        <input type="date" v-model.lazy="saveDao[item.fieldName]" class="form-control" v-bind:id="'inputFile'+index" :disabled="!item.canEdit"/>
                                    </template>

                                </div>
                            </div>
                        </template>
                    </div>
                </div>
            </div>

            <!--详细信息部分-->
            <div class="col-md-12 column" style="margin-bottom: 10px">
                <div class="panelX" style="margin: 0px">
                    <div class="panel-heading">
                        <h3 class="panel-title"> 联系方式 </h3>
                    </div>
                    <div class="panel-body">
                        <li v-for="(item, index) in infoDto.itemDetailDaoList" style="list-style-type:none">
                            <div class="form-group col-md-6">
                                <label for="inputFile-detail-{{index}}" class="col-md-2 control-label" style="text-align: right">{{item.itemName}} : </label>
                                <div class="col-md-10">
                                    <input type="text"  v-model="item.itemValue"  class="form-control" id="inputFile-detail-{{index}}" />
                                </div>
                            </div>
                        </li>
                    </div>
                </div>
            </div>

            <!--地址部分-->
            <div class="col-md-12 column" style="margin-bottom: 10px">
                <div class="panelX" style="margin: 0px">
                    <div class="panel-heading">
                        <h3 class="panel-title"> 地址配置 </h3>
                    </div>
                    <div class="panel-body" style="padding: 0px">
                        <!--照片展示列表-->
                        <table class="table table-bordered table-hover table-condensed">
                            <thead>
                            <tr>
                                <th width="5%">ID</th>
                                <th width="10%">姓名</th>
                                <th width="15%">电话</th>
                                <th width="65%">地址</th>
                                <th width="5%">操作</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr v-for="(item, index) in infoDto.customerAddressDaoList">
                                <td width="5%">
                                    {{item.id}}
                                </td>
                                <td width="10%">
                                    <input type="text"  v-model="item.name"  class="form-control"   />
                                </td>
                                <td width="15%">
                                    <input type="text"  v-model="item.phone"  class="form-control"   />
                                </td>
                                <td width="65%">
                                    <input type="text"  v-model="item.address"  class="form-control"   />
                                </td>
                                <td width="5%">
                                    <button type="button" class="btn btn-link"  v-on:click="deleteAddress(index)">删除</button>
                                </td>
                            </tr>
                            </tbody>
                        </table>
                        <!--<hr>-->
                        <button type="button" class="btn btn-link" data-toggle="modal" v-on:click="addAddress()">添加地址</button>
                    </div>
                </div>
            </div>

        </div>
        <div   id="bottomBody" class="panel-footer" style="background-color: white;">
            <button type="button" v-on:click="submit" class="btn btn-primary btn-lg btn-block "   v-if="isShow">提交保存</button>
        </div>
    </div>
</div>

<script>
    //采用vue
    var CustomerEdit = new Vue({
        el: '#CustomerEdit',
        data: {
            //提交的url
            submitUrl: '',
            //根据id查询对象的url
            queryUrl:'',
            //返回查询页面的url
            backUrl:'',
            //根据
            initSaveColumnUrl:Vue.prototype.getUrl('/pageInit/getInitEditPageDto/Customer'),
            saveDao:{},
            initSaveColumnList:[],
            dict:{},
            isEdit : false,
            isShow : true,
            nowSelImageField:'',
            /**自定义的*/
            dicts:{
                Contact:{ list:[], map:new Map()}
            },
            infoDto:{
                itemDetailDaoList:[],
                customerAddressDaoList:[]
            }
        },
        methods: {
            /**初始化*/
            init:function () {
                var that = this;
                this.$send(this.initSaveColumnUrl,null,function(data){
                    console.log('init执行成功！！'+JSON.stringify(data));
                    that.initSaveColumnList = data.initSaveColumnList;
                    that.submitUrl = data.saveUrl;
                    that.queryUrl = data.queryUrl;
                    that.backUrl = data.backUrl;
                    that.dict = data.dict;
                    //加载id对应的数据
                    that.loadEditData();
                });
            },
            initDetail:function () {
                console.log('initDetail');
                var contactDict = this.dicts.Contact.list;
                for(var i =0;i<contactDict.length;i++){
                    //判断是否已经存在对象
                    if(this.isHaveItem(contactDict[i].id)){
                        continue;//跳过
                    }
                    var itemDetailDao = {
                        id:null,
                        parentId:null,
                        itemConfigId:contactDict[i].id,
                        itemName:contactDict[i].codeValue,
                        itemValue:''
                    }
                    console.log(itemDetailDao);
                    //加入
                    this.infoDto.itemDetailDaoList.push(itemDetailDao);
                }
            },
            //判断是否已经存在
            isHaveItem(itemConfigId){
                for(var i=0;i<this.infoDto.itemDetailDaoList.length;i++){
                    if(this.infoDto.itemDetailDaoList[i].itemConfigId == itemConfigId){
                        return true;
                    }
                }
                return false;
            },
            addAddress:function() {
                //加入
                this.infoDto.customerAddressDaoList.push({});
            },
            deleteAddress:function(index) {
                if(confirm('确定删除此地址？')){
                    this.infoDto.customerAddressDaoList.splice(index,1);
                }
            },
            jumpToList:function() {
                //加载页面
                loadPageToBodyMain(this.backUrl);
            },
            /**选择图片控件*/
            selectImage:function (fieldName){
                console.log('图片选择');
                //打开图片选择模态框
                this.$openImageComponent();
                //标记当前选择的图片控件
                this.nowSelImageField = fieldName;
            },
            selectedImageCallBack: function(imgId) {
                console.log('图片选择回调函数:'+imgId);
                //回写图片选择
                this.saveDao[this.nowSelImageField] = imgId;
            },
            /**根据id获取对应实体*/
            loadEditData(){
                //判断是否是修改
                if(sessionStorage.editId != null && sessionStorage.editId != 'null'){
                    console.log('editId=>'+sessionStorage.editId);
                    var that = this;
                    this.$send(this.queryUrl+sessionStorage.editId,null,function(data){
                        console.log('loadEditData成功！！'+JSON.stringify(data));
                        that.saveDao = data.customerDao;
                        that.infoDto = data;
                    });
                    sessionStorage.editId = null;
                }
            },
            /** 提交 */
            submit: function() {
                if(!this.submitCheck()){ //数据校验
                    return false;
                }
                this.infoDto.customerDao = this.saveDao;
                //走提交流程
                var that = this;
                this.$send(this.submitUrl,this.infoDto,function(data){
                    console.log('执行成功！！'+JSON.stringify(data));
                    that.isShow = false;
                    alert("保存成功");
                });
            },
            /** 提交表单前的验证*/
            submitCheck:function(){
                for(var i=0;i<this.initSaveColumnList.length;i++){
                    if(this.initSaveColumnList[i].required){
                        var testValue = this.saveDao[this.initSaveColumnList[i].fieldName];
                        if(testValue == null || testValue == '' || testValue == undefined){
                            alert('非空校验失败:['+this.initSaveColumnList[i].title+'],请完善!!');
                            return false;
                        }
                    }
                }
                //校验明细信息
                var itemList = this.infoDto.itemDetailDaoList;
                for(var i = 0 ; i < itemList.length ; i++ ){
                    if(itemList[i].itemValue.trim().length == 0){
                        alert(itemList[i].itemName+'不能为空！');
                        return false;
                    }
                }
                //校验长度
                var addressList =this.infoDto.customerAddressDaoList;
                if (addressList.length == 0) {
                    alert('地址至少有一条！');
                    return false;
                }
                for(var i = 0 ; i < addressList.length ; i++ ){
                    if(addressList[i].name==null || addressList[i].name.length == 0){
                        alert('第'+ (i+1) +'行姓名不能为空！');
                        return false;
                    }
                    if(addressList[i].phone==null || addressList[i].phone.length == 0){
                        alert('第'+ (i+1) +'行电话号不能为空！');
                        return false;
                    }
                    if(addressList[i].address==null || addressList[i].address.length == 0){
                        alert('第'+ (i+1) +'行地址不能为空！');
                        return false;
                    }
                }

                return true;
            },

        },
        /**入参方法*/
        created: function () {
            var that_ = this;
            //初始化字典
            this.$loadDicts(this.dicts,function(codeType){
                if (codeType == 'Contact') {
                    that_.initDetail();
                    that_.init();
                }
            });
            //重写图片选择回调方法
            Vue.prototype.selectedImg = function(imgId){
                that_.selectedImageCallBack(imgId);
            };
        },
    });
</script>
